<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .arr1,.arr2{
            display: flex;
        }
        .arr1 p{
            width: 50px;
            height: 50px;
            border: 1px solid #ccc;
            border-radius: 20px;
            box-sizing: border-box;
            line-height: 50px;
            text-align: center;
            margin-right: 16px;
            cursor: pointer;
        }
        .arr2 p{
            width: 50px;
            height: 50px;
            color: #fff;
            background-color: rgba(0, 0, 0, 0.7);
            border-radius: 20px;
            box-sizing: border-box;
            line-height: 50px;
            text-align: center;
            margin-right: 16px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div class="arr1"></div>
    <div class="arr2"></div>
</body>
<script>
    let arr1 = [1,2,3,4,5];
    let arr2 = [];
    let arr1Dom = document.querySelector('.arr1');
    let arr2Dom = document.querySelector('.arr2');

    let emptyArr1 = [];
    function renderArray1(paramsArr){
        arr1Dom.innerHTML = ''; // 清空之前的内容

        arr2 = [];
        arr1 = paramsArr||arr1;
        arr1.forEach(el=>{
            let dom = document.createElement('p');
            dom.innerText = el;
            dom.addEventListener('click',()=>{
                arr2.push(el); // 点击后将元素添加到arr2;
                if(emptyArr1.length){
                    emptyArr1 = emptyArr1.filter(it=>it!=el);
                }else{
                    emptyArr1 = arr1.filter(it=>it!=el);
                }
                dom.remove();
                renderArray2(emptyArr1); // 重新渲染DOM
            })
            arr1Dom.appendChild(dom);
        });
    }
    renderArray1();
    let emptyArr2 = [];
    function renderArray2(emptyArr1) {
      arr2Dom.innerHTML = ''; // 清空之前的内容

      arr2 = [...new Set([...emptyArr2, ...arr2])]
    
      arr2.forEach(function(item) {
        var element = document.createElement('p');
        element.textContent = item;
        element.onclick = function() {
          arr2 = [...new Set([...emptyArr2, ...arr2])]
          emptyArr1.push(item);
          emptyArr2 = arr2.filter(it=>it!=item);
          element.remove();
          renderArray1(emptyArr1); // 重新渲染DOM
        };
        arr2Dom.appendChild(element);
      });
    }
</script>
</html>